import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import ProForm, { DrawerForm, ProFormText, ProFormSelect, ModalForm, ProFormUploadDragger, ProFormTextArea } from '@ant-design/pro-form';
import React, { useState, useRef } from 'react';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import { deptList,savedept,updatedept,deletedept } from '../service';
import { Popconfirm,Button,message } from 'antd';
import { FileExcelOutlined } from '@ant-design/icons';
export default () => {
const [showCreate, setShowCreate] = useState(false);
const actionRef = useRef<ActionType>();
const [detail, setDetail] = useState<any>({});
const [showImport, setShowImport] = useState<boolean>(false);
const [dataList,setDataList] = useState<any[]>([
    {id:1,nickname:'张三',phone:'13123456789',dept:'泌尿',zc:'主任医师',zw:'决策人',code:'H00001',name:'上海交通大学医学院附属仁济医院'},
    {id:2,nickname:'李四',phone:'13223456789',dept:'神经',zc:'主任医师',zw:'科室主任',code:'H00001',name:'上海瑞金医院'},
    {id:3,nickname:'王五',phone:'13323456789',dept:'外科',zc:'主任医师',zw:'主任',code:'H00001',name:'上海中山医院'},
    {id:4,nickname:'赵六',phone:'13423456789',dept:'消化',zc:'主任医师',zw:'副主任',code:'H00001',name:'上海交通大学医学院附属仁济医院'}
]);
const columns: ProColumns[] = [
    {
        title:'联系人',
        dataIndex:'nickname',
        width:200,
        ellipsis:true,
    },
    {
        title:'联系方式',
        dataIndex:'phone',
        width:200,
        ellipsis:true,
    },
    {
        title:'科室',
        dataIndex:'dept',
        width:100,
        ellipsis:true,
    },
    {
        title:'职称',
        dataIndex:'zc',
        width:140,
        ellipsis:true,
    },
    {
        title:'职务',
        dataIndex:'zw',
        width:140,
        ellipsis:true,
    },
   {
       title:'医院代码',
       dataIndex:'code',
       width:120,
       ellipsis:true,
   },
   {
       title:'医院名称',
       dataIndex:'name',
       width:200,
       ellipsis:true,
   },

   {
    title:'备注',
    dataIndex:'remark',
    width:150,
    hideInSearch:true,
   },
   {
    title:'操作',
    valueType:'option',
    width:120,
    fixed: 'right',
    render: (text, record:any, _, action) => [
       <a key='detail' onClick={async () => {
       setDetail(record)
         setShowCreate(true)
       }}>详情</a>,
      //  record.deleteFlag=='1'?
       <Popconfirm title='确定要删除吗?' key='delete' onConfirm={() => handleDelete(record.id)}><a>删除</a></Popconfirm>
    ]}
   ]
   const handleDelete = async(id:string) => {
        var val = await deletedept({
          id: id,
        });

       if (val.errorCode === '200') {
           message.success('删除成功')
           actionRef.current?.reloadAndRest?.()
       } else {
          message.error(val.errorMessage)
       }
   };
   const onFileUpload = (info: any) => {
    if (info.file.status !== 'uploading') {}
    if (info.file.status === 'done') {
      if (info.file.response.errorCode === '200') {
        message.success(`${info.file.name} 上传成功，后台正在处理...`);
        actionRef.current?.reloadAndRest?.();
        setShowImport(false);
      } else {
        message.error('上传失败: ' + info.file.response.msg);
      }
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} 上传失败！`);
    }
  };

return (<PageContainer>
    <ProTable actionRef={actionRef} headerTitle='列表' pagination={{pageSizeOptions: ['20', '100', '500']}}
        dataSource={dataList}
        scroll={{x:1300}}
        columns={columns} rowKey='id' toolbar={{settings: []}}
       search={{labelWidth: 120}} toolBarRender={() => [<Button type='primary' key='primary' onClick={() => {setShowCreate(true);setDetail(undefined)}}>新增</Button>,
       <Button type='primary' key='import' onClick={async () => {
        setShowImport(true);
      }}>
         <FileExcelOutlined/>导入
        </Button>]}
   />
  <DrawerForm title={detail ? '编辑' : '新增'} onVisibleChange={setShowCreate} visible={showCreate} drawerProps={{forceRender: true,destroyOnClose: true}} 
  onFinish={async (values: any) => {
    var val = undefined
    if (detail) {
      values.id = detail.id;
      val = await updatedept(values);
    } else {
      val = await savedept(values);
    }
    if (val.errorCode === '200') {
      message.success('提交成功');
      actionRef.current?.reloadAndRest?.();
      return true;
    } else {
      message.error(val.errorMessage);
      return false;
    }
  }}>
       <ProForm.Group>
           <ProFormText name='nickanme' label='联系人'  placeholder='请输入联系人姓名' width='md'   />
           <ProFormText name='phone' label='联系方式'  placeholder='请输入联系方式' width='md'  rules={[{required: true}]} />
       </ProForm.Group>
       <ProForm.Group>
           <ProFormText name='dept' label='科室'  placeholder='请输入科室' width='md' />
           <ProFormText name='zc' label='职称'  placeholder='请输入职称' width='md' />
           <ProFormText name='zw' label='职务'  placeholder='请输入职务' width='md' />
       </ProForm.Group>
       <ProForm.Group>
       <ProFormSelect name='hospital' label='所属医院' placeholder='请选择医院' width='lg' options={[]}/>
        </ProForm.Group>
        <ProForm.Group>
            <ProFormTextArea name='remarks' label='备注' width={'lg'} placeholder='请输入备注' fieldProps={{
                showCount: true,
                maxLength: 200
            }} >
            </ProFormTextArea>
        </ProForm.Group>
	  </DrawerForm>
    <ModalForm title='导入' onVisibleChange={v => {
      setShowImport(v);
    }} modalProps={{
      destroyOnClose: true,
      forceRender: true
    }} visible={showImport} onFinish={async (values: any) => {
      return true;
    }}>
             <div style={{
        margin: '10px 0 20px 0'
      }}><a href='/xwyl/attach/dept.xlsx' download='科室.xlsx'><Button type='primary'> <FileExcelOutlined/>科室模板下载</Button></a></div>
            <ProFormUploadDragger label='选择excel上传' name='file' action='/xwyl/hospitalDepartment/hospitalDepartmentImport' fieldProps={{
        name: 'file',
        headers: {
          'authorization': (sessionStorage.getItem('token') as string)
        }
      }} max={1} onChange={onFileUpload}/>

         </ModalForm>
   </PageContainer>
)}